<template>
  <div>
    <header>
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        show-action
      >
        <template #left>
          <van-icon name="wap-nav" class="iconleft" @click="handleCategory"/>
        </template>
        <template #action>
          <van-icon name="chat-o" class="iconright"/>
        </template>
      </van-search>
    </header>
    <main>
      <div class="main-top-box">
        <div class="imgblock-box-outer" style=" background-image: url(&quot;https://s10.mogucdn.com/mlcdn/c45406/190429_4d0jffeeefieijgkj39fgagik0i52_165x166.jpg&quot;); background-size: cover;">
         <p class="title">限时快抢</p>
        </div>
        <div class="imgblock-box-outer" style=" background-image: url(&quot;https://s10.mogucdn.com/mlcdn/c45406/190203_2bdhlkh0l7il4hlc2jfb98kg2232k_165x165.jpg&quot;); background-size: cover;"> 
        <p class="title">热销榜单</p>
        </div>
        <div class="imgblock-box-outer" style="background-image: url(&quot;https://s10.mogucdn.com/mlcdn/c45406/190909_1i9ig5c4f0idfb2l83ejbfac9d4ke_248x248.jpg&quot;); background-size: cover;">
        <p class="title">好货精选</p>
        </div>
        <div class="imgblock-box-outer" style=" background-image: url(&quot;https://s10.mogucdn.com/mlcdn/c45406/190910_57052df5hb286bifhl13ed65lajfc_248x248.png&quot;); background-size: cover;">
        <p class="title">新品快抢</p>
        </div>
      </div>
      <!-- 宫格 5*3 -->
      <div class="gongge">
        <van-grid :border="false" :column-num="5">
          <van-grid-item v-for="item in list" :key="item.id">
            <van-image :src="item.url" />
            <p>
              {{item.title}}
            </p>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 猜你喜欢 -->
      <div>
        <img src="https://s10.mogucdn.com/mlcdn/c45406/190426_4hlfgkc2ceaea67422ag73077lfce_1611x166.png_1200x9999.v1c7E.81.webp" alt="" class="favorate-img">
      </div>
      <div class="list">
        <div class="list-item-box" v-for="(item,index) in goodsList" :key="index">
          <img :src="item.img" alt="" class="list-img">
          <div class="list-item-bottom">
            <span class="item-title">{{item.title}}</span>
            <span>￥{{item.price}}</span>
            <div class="btn_box" style="color: rgb(255, 255, 255); background-color: rgb(255, 87, 119);">立即购买</div>
          </div>
        </div>
      </div>
    </main>
    
  </div>
</template>

<script>
import axios from "axios";

var list = [
  {
    id: '001',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/200327_1820c19ichg1j65jcf68189c0dkdh_135x135.jpg_640x640.v1cAC.40.webp',
    title: '女装'
  },
  {
    id: '002',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/190903_0572el03440fllf207k3g5kfe6g35_150x150.jpg_640x640.v1cAC.40.webp',
    title: '上衣'
  },
  {
    id: '003',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/200327_4j3jij3d1fk2g8d5df0hlcgefj2i0_135x135.jpg_640x640.v1cAC.40.webp',
    title: '裤子'
  },
  {
    id: '004',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/200327_42i1j8hbcl2g17ibic1jhb10jj691_135x135.jpg_640x640.v1cAC.40.webp',
    title: '裙子'
  },
  {
    id: '005',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/200327_1dicfk94e071c83j3b9hii20lg1il_135x135.jpg_640x640.v1cAC.40.webp',
    title: '套装'
  },
  {
    id: '006',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/191023_6730bi06dh6hh7cf3e7h52k4b8gc5_135x135.jpg_640x640.v1cAC.40.webp',
    title: '女鞋'
  },
  {
    id: '007',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/190908_5gabjle2l5ga1g4c211f6b7a8jglh_135x135.png_640x640.v1cAC.40.webp',
    title: '美妆个护'
  },
  {
    id: '008',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/200327_1elf51b3i1j664ea4ga4dc7kai57h_135x135.jpg_640x640.v1cAC.40.webp',
    title: '包包'
  },
  {
    id: '009',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/191021_3k16ikdij0ee5jg5a1d3d8218ba63_135x135.jpg_640x640.v1cAC.40.webp',
    title: '配饰'
  },
  {
    id: '010',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/200327_01eefe13a7fj2dkj7bl7i2ele3de2_135x135.jpg_640x640.v1cAC.40.webp',
    title: '内衣'
  },
  {
    id: '011',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/200327_883914gkdb4kdc1hg8a86acea5k8d_135x135.jpg_640x640.v1cAC.40.webp',
    title: '男友'
  },
  {
    id: '012',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/200327_2f20ffj767lblfe04880a440clalh_135x135.jpg_640x640.v1cAC.40.webp',
    title: '家居'
  },
  {
    id: '013',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/200327_71lga2bk3663chkh6h95b845d95c5_135x135.jpg_640x640.v1cAC.40.webp',
    title: '母婴'
  },
  {
    id: '014',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/200327_3hc7cec2h05fh53ke284llifla241_135x135.jpg_640x640.v1cAC.40.webp',
    title: '食品'
  },
  {
    id: '015',
    url: 'https://s10.mogucdn.com/mlcdn/c45406/200327_8bje422247bk8id0fd07237035920_135x135.jpg_640x640.v1cAC.40.webp',
    title: '运动'
  },
]
export default {
  data(){
    return {
       active: 0,
       value: "",
       list,
       goodsList: [] // 商品列表
    }
  },
  methods: {
     handleCategory(){
      this.$router.push('/category');
    }
  },
  async mounted(){
    await axios.get('/mg/search?_version=8253&ratio=3%3A4&cKey=46&sort=pop&page=1&q=%25E7%25BE%258E%25E5%25A6%2586%2F%25E4%25B8%25AA%25E6%258A%25A4&minPrice=&maxPrice=&ppath=&cpc_offset=&ptp=32._mf1_1239_71971.0.0.iOrOPBIM&acm=3.mce.1_10_1mv0y.132827.0-84057.tg87hsFWXeYGj.sd_119_115-mid_132827-pos_876-m_533293-lc_201-mf_71971_1211979-idx_6-mfs_15-dm1_5000')
    .then(ret => {
      return ret.data
    })
    .then(res => {
      console.log(res.result.wall.docs);
      this.goodsList = res.result.wall.docs
    })
  }
}
// https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=pop&page=1&q=%25E7%25BE%258E%25E5%25A6%2586%2F%25E4%25B8%25AA%25E6%258A%25A4&minPrice=&maxPrice=&ppath=&cpc_offset=&ptp=32._mf1_1239_71971.0.0.iOrOPBIM&acm=3.mce.1_10_1mv0y.132827.0-84057.tg87hsFWXeYGj.sd_119_115-mid_132827-pos_876-m_533293-lc_201-mf_71971_1211979-idx_6-mfs_15-dm1_5000&_=1628839193157&callback=jsonp1
</script>

 <style  lang="stylus" scoped>
@import '~@/assets/stylus/ellipsis.styl'
html
body
  weight 100%
  height 100%
  .van-search
    padding 10px
    .iconleft
      padding-right 8px
    .iconright
      padding 8px 0 0 4px
.van-icon
  color #9b9b9b
  font-size 21px

.content 
  position relative
  
  &::after
    position absolute
    content ''
    border-top 1px solid #f00
    width 200%
    height 200%
    transform scale(0.5)
    transform-origin 0 0

main
  .main-top-box
    height 100px
    display: flex
    justify-content space-around
    .imgblock-box-outer
      width 82px
      height 82px
      position: relative
      border-radius: 6px
      .title
        position absolute
        left 0
        bottom 0
        width 100%
        text-align center
        color #fff



/deep/ .van-grid-item__content
  padding 0 8px
  color #666
  p
    font-size 12px
    margin 5px

.favorate-img
  width 100%
  display block

.list
  width 100%
  padding 8px
  box-sizing border-box
  background-color #eee
  column-count: 2
  column-gap 1
  column-width 30%
  .list-item-box
    display inline-block
    margin-bottom 9px
    box-sizing border-box
    background-color #fff
    border-radius 5px
    .list-img
      width 100%
      border-radius 5px
    .list-item-bottom
      box-sizing border-box
      width 100%
      padding 7px
      .item-title
        ellipsis(100%)
        font-size 13px
      span
        display block
      .btn_box
        margin 4px
        border-radius 4px
        text-align center
        font-size:13px
        color: rgb(255, 255, 255);
        background-color: rgb(255, 87, 119);
        padding 2px
</style>